<template>
  <div class="AllGoodsEdit">
    <a-form :form="form">
      <a-row :gutter="0">
        <a-col :span="24">
          <a-form-item label="商品名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input
              v-decorator="[
          'goodsName',
          {rules: [{ required: true, message: '请输入商品名称!' }]}
        ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="自定义商品编码"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8,offset: 1 }"
          >
            <a-input
              v-decorator="[
          'customGoodsCode',
          {rules: [{ required: true, message: '请输入自定义商品编码!' }]}
        ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="商品条码" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input
              v-decorator="[
          'goodsCodes',
          {rules: [{ required: true, message: '请输入商品条码!' }]}
        ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="商品分类" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-cascader
              :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
              :options="caList"
              placeholder="请选择"
              v-decorator="['goodsClassify',
          {rules: [{ required: true, message: '请选择商品分类!' }]}]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="算法识别码" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-select
              labelInValue
              v-decorator="[
          'arithmetic',
          {rules: [{ required: true, message: '请选择算法识别码!' }]}
        ]"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in alList"
                :key="item.id"
                :value="String(item.id)"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            class="tag"
            label="商品图"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8,offset: 1 }"
          >
            <div class="dropbox">
              <a-upload-dragger
                listType="picture-card"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="handleChange"
                :data="uploadData"
                :action="uploadUrl"
              >
                <img style="width:100%" v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <p class="ant-upload-drag-icon">
                    <a-icon type="inbox" />
                  </p>
                  <div class="ant-upload-text">
                    <p class="ant-upload-text">添加图片</p>
                  </div>
                </div>
              </a-upload-dragger>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            class="tag"
            label="商品陈列图"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8,offset: 1 }"
          >
            <div class="dropbox">
              <a-upload-dragger
                listType="picture-card"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="displayChange"
                :data="uploadData"
                :action="uploadUrl"
              >
                <img style="width:100%" v-if="displayImageUrl" :src="displayImageUrl" alt="avatar" />
                <div v-else>
                  <p class="ant-upload-drag-icon">
                    <a-icon type="inbox" />
                  </p>
                  <div class="ant-upload-text">
                    <p class="ant-upload-text">添加图片</p>
                  </div>
                </div>
              </a-upload-dragger>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="商品尺寸" :label-col="{ span: 5 }" :wrapper-col="{ span: 8,offset: 1 }">
            <span class="ant-form-text">长：</span>
            <a-input-number v-decorator="['long']" />
            <span class="ant-form-text">mm</span>
          </a-form-item>
          <a-form-item label="宽" :label-col="{ span: 5 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input-number v-decorator="['wide']" />
            <span class="ant-form-text">mm</span>
          </a-form-item>
          <a-form-item label="高" :label-col="{ span: 5 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input-number v-decorator="['high']" />
            <span class="ant-form-text">mm</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="放置方式" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-radio-group v-decorator="['placementMode']">
              <a-radio :value="1">平放</a-radio>
              <a-radio :value="2">立放</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="占用列" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input-number v-decorator="['occupancyColumn']" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货道可放置数" :label-col="{ span: 4 }" :wrapper-col="{ span: 8,offset: 1 }">
            <a-input-number v-decorator="['placementNumber']" />
          </a-form-item>
        </a-col>
        <a-col :span="24" style="text-align:right">
          <router-link to="/home/goodsadmin/allgoods">
            <a-button>取消</a-button>
          </router-link>
          <a-button type="primary" style="margin-left:2%" @click="edit">确定</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "AllGoodsEdit",
  data() {
    return {
      form: this.$form.createForm(this),
      caList: [],
      alList: [],
      imageUrl: "",
      displayImageUrl: "",
      uploadData: {
        loginToken: this.$store.state.loginToken
      },
      uploadUrl: this.baseUrl + "/goods/upLoadFile"
    };
  },
  methods: {
    handleChange(info) {
      if (info.file.status === "uploading") {
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
        });
      }
      console.log(info);
      this.goodsImgFileName = info.file.name;
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      if (!isJPG) {
        this.$message.error("您只能上传JPG文件!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图像必须小于2MB!");
      }
      return isJPG && isLt2M;
    },

    displayChange(info) {
      if (info.file.status === "uploading") {
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, displayImageUrl => {
          this.displayImageUrl = displayImageUrl;
        });
      }
      this.exhibitImgFileName = info.file.name;
    },
    // 编辑商品初始化
    editInit() {
      this.axios
        .post(this.baseUrl + "/goods/editInit", {
          loginToken: this.$store.state.loginToken,
          id: this.$store.state.editId
        })
        .then(response => {
          // console.log(response);
          this.alList = response.data.data.alList;
          this.caList = response.data.data.caList;
          this.editInfo = response.data.data;
          this.form.setFieldsValue({
            goodsName: this.editInfo.name,
            goodsCodes: this.editInfo.barCode,
            goodsClassify: [this.editInfo.parentCatId, this.editInfo.catId],
            arithmetic: { key: `${this.editInfo.algorithmIdentificationId}` },
            long: this.editInfo.length,
            wide: this.editInfo.width,
            high: this.editInfo.height,
            placementMode: this.editInfo.placementMode,
            occupancyColumn: this.editInfo.occupancyColumn,
            placementNumber: this.editInfo.placementNumber,
            customGoodsCode: this.editInfo.customCode
          });
          this.imageUrl = this.editInfo.imageUrl;
          this.displayImageUrl = this.editInfo.imageDisplayUrl;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 编辑商品
    edit() {
      var values = this.form.getFieldsValue();
      if (this.goodsImgFileName == undefined) {
        var goodsImgName = this.editInfo.imageUrl;
      } else {
        var goodsImgName = this.goodsImgFileName;
      }
      if (this.exhibitImgFileName == undefined) {
        var exhibitImgName = this.editInfo.imageDisplayUrl;
      } else {
        var exhibitImgName = this.exhibitImgFileName;
      }
      this.axios
        .post(this.baseUrl + "/goods/edit", {
          loginToken: this.$store.state.loginToken,
          id: this.$store.state.editId,
          algorithmIdentificationId: values.arithmetic.key,
          parentCatId: values.goodsClassify[0],
          catId: values.goodsClassify[1],
          barCode: values.goodsCodes,
          height: values.high,
          imageUrl: goodsImgName,
          imageDisplayUrl: exhibitImgName,
          length: values.long,
          name: values.goodsName,
          occupancyColumn: values.occupancyColumn,
          placementMode: values.placementMode,
          placementNumber: values.placementNumber,
          width: values.wide,
          customCode: values.customGoodsCode
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$router.push("/home/goodsadmin/allgoods");
            this.$message.info("编辑成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.editInit();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AllGoodsEdit {
  width: 100%;
}
.dropbox {
  max-width: 50%;
}
</style>
